import React from "react";
export default class SwiperCom extends React.Component {
    constrincor() {
        super();
            this.Swiper={
                bannerList:[],

            }
        
    }
    swiperInit() {
        new Swiper(".swiper", {
            loop: true,
            autoplay: {
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
                delay:1000, // 切换秒
            },
            // 分页器
            pagination: {
                el: ".swiper-pagination",
            },
            // 前进后退
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    }
    componentDidMount() {
        this.$axios.get("https://apipc-xiaotuxian-front.itheima.net/home/banner").then((res) => {
            if (res.data.msg == '操作成功') {
                this.state.bannerList = res.data.result;
                this.setState(
                    {
                        bannerList: this.state.bannerList
                    },
                    () => {
                        this.swiperInit();
                    }
                )

            }
        });
    }

    render() {
        return <div className="swiper">
            <div className="swiper-wrapper">
                {this.state.bannerList.map((item, index) => {
                    return <div key={index} className="swiper-slide">
                        <img src={fitem.imgurl} alt="" />
                    </div>
                })}
            </div>
            <div className="swiper-pagination"></div>
            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
        </div>
    }
}



